<template>
<el-row :gutter="20">
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>资产总数(台)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.AssetsTotal" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>维修(台)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.Repair" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>调拨(次)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.allocation" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>报废(台)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.Scrap" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>借出(台)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.Lend" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content">
            <a class="backlog-body">
                <h3>库存预警(台)</h3>
                <p>
                    <cite>
                        <count-to :start-val="0" :end-val="panelData.StockWarning" :duration="3000" class="card-panel-num"/>
                    </cite>
                </p>
            </a>
        </div>
    </el-col>
</el-row>
</template>

<script>
import CountTo from "vue-count-to";
import request from "@/utils/request";
export default {
  name: "Data panel",
  components: {
    CountTo
  },
  data() {
    return {
      panelData: {
        AssetsTotal: 0,
        Repair: 0,
        allocation: 0,
        Scrap: 0,
        Lend: 0,
        StockWarning: 0
      }
    };
  },
  methods: {
    getData() {
      request({
        url: this.$api.panelData,
        method: "GET"
      }).then(res => {
        // 获取数据
        this.panelData = res.data;
      });
    }
  },
  mounted() {
      this.getData();
  }
};
</script>

<style lang="less" scoped>
.backlog-body {
  display: block;
  padding: 10px 15px;
  color: #999;
  border-radius: 3px;
  transition: all 0.3s;
  p {
    margin-top: 0;
    cite {
      font-style: normal;
      font-size: 30px;
      font-weight: 300;
      color: #fff;
    }
  }
  h3 {
    color: #fff;
    margin-top: 1rem;
    margin-bottom: 0;
  }
}

a.backlog-body:hover {
  transition: ease-in 0.1s;
  transform: scale(1.1);
}

.card-body .el-col:nth-child(1) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(91, 187, 241) 0%,
    rgb(108, 198, 242) 100%
  );
}

.card-body .el-col:nth-child(2) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(117, 193, 131) 0%,
    rgb(134, 216, 149) 100%
  );
}

.card-body .el-col:nth-child(3) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(242, 124, 109) 0%,
    rgb(251, 144, 132) 100%
  );
}

.card-body .el-col:nth-child(4) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(249, 160, 65) 0%,
    rgb(255, 177, 94) 100%
  );
}

.card-body .el-col:nth-child(5) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(233, 120, 172) 0%,
    rgb(247, 140, 189) 100%
  );
}

.card-body .el-col:nth-child(6) .backlog-body {
  background-image: linear-gradient(
    0deg,
    rgb(164, 100, 185) 0%,
    rgb(193, 114, 219) 100%
  );
}
</style>